<template>
    <div class="postindex">
        <div class="emptypost" v-if="postList.length==0">
            <div class="ep_title">
                <span>AI爱招聘</span>
            </div>
            <div class="ep_desc">
                <span>带给您更极致的招聘体验</span>
            </div>
            <div class="ep_txt">
                <span>暂无岗位，快去发布吧！</span>
            </div>
            <div class="ep_btn" @click="toAddPost">
                <span>发布岗位</span>
            </div>
        </div>
        <template v-if="postList.length>0">

       
            <div class="pi_head">
                <div class="pih_left">
                    <div class="pihl_select">
                        <span>{{year}}</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                    <div class="pihl_div">
                        <span>累计流量</span>
                        <span>{{totalInfo.readNum}}次</span>
                    </div>
                    <div class="pihl_div">
                        <span>系统内曝光</span>
                        <span>{{totalInfo.arws}}次</span>
                    </div>
                    <div class="pihl_div">
                        <span>系统外曝光</span>
                        <span>{{totalInfo.oscd}}次</span>
                    </div>
                </div>
                <div class="pih_right">
                    <span>面试日历>></span>
                </div>
            </div>
            <div class="pih_table">
                <div class="piht_first">
                    <div class="pihtf_div" :class="{select_div:status==1}" @click="changeStatus('1')">
                        <span>发布中</span>
                        <div class="pihtfd_xian" v-if="status==1"></div>
                    </div>
                    <div class="pihtf_div" :class="{select_div:status==''}" @click="changeStatus('')">
                        <span>全部岗位</span>
                        <div class="pihtfd_xian" v-if="status==''"></div>
                    </div>
                </div>
                <div class="piht_second">
                    <div class="pihts_left">
                        <template v-for="item in rewardList">
                            <div class="pihts_div" :class="{select_div:reward==item.value}" @click="changeReward(item)">
                                <span>{{item.label}}</span>
                                <div class="pihtsd_xian" v-if="item.value==reward"></div>
                            </div>
                        </template>
                    
                        <!-- <div class="pihts_div">
                            <span>一般岗位</span>
                            <div class="pihtsd_xian"></div>
                        </div> -->
                    </div>
                    <div class="pihts_right" @click="showUrgencyDialog">
                        <span>按重要紧急程度排序</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                
                </div>
            </div>
            <div class="pih_list">
                <div class="pihl_content">
                    <div class="pihlc_div">
                        <div class="pihlcd_head">
                            <div class="pihlcdh_select">
                                <i class="iconfont "></i>
                            </div>
                            <div class="pihlcdh_main">
                                <div class="pihlcdh_left">
                                    <span>研发总监</span>
                                </div>
                                <div class="pihlcdh_right">
                                    <span>南京</span>
                                    <span>8-10W</span>
                                </div>
                            </div>
                        </div>
                        <div class="pihlcd_total">
                            <div class="pt_div">
                                <span>100000</span>
                                <span>悬赏总金额(元)</span>
                            </div>
                            <div class="pt_div">
                                <span>18000</span>
                                <span>已发奖金(元)</span>
                            </div>
                            <div class="pt_div">
                                <span>5</span>
                                <span>分发(次)</span>
                            </div>
                            <div class="pt_div">
                                <span>8000</span>
                                <span>总曝光(次)</span>
                            </div>
                        </div>
                        <div class="pihlcd_main">
                            <div class="pm_div">
                                <span>25</span>
                                <span>不合适</span>
                            </div>
                            <div class="pm_div">
                                <span>3</span>
                                <span>意愿待确认</span>
                            </div>
                            <div class="pm_div">
                                <span>5</span>
                                <span>待筛选</span>
                            </div>
                            <div class="pm_div">
                                <span>10</span>
                                <span>通过初选</span>
                            </div>
                        </div>
                        <div class="pihlcd_main" style="background: #FFFFFF;">
                            <div class="pm_div">
                                <span>25</span>
                                <span>拟初试</span>
                            </div>
                            <div class="pm_div">
                                <span>3</span>
                                <span>已初试</span>
                            </div>
                            <div class="pm_div">
                                <span>5</span>
                                <span>拟复试</span>
                            </div>
                            <div class="pm_div">
                                <span>10</span>
                                <span>已复试</span>
                            </div>
                        </div>
                        <div class="pihlcd_main">
                            <div class="pm_div">
                                <span>25</span>
                                <span>拟录用</span>
                            </div>
                            <div class="pm_div">
                                <span>3</span>
                                <span>录用</span>
                            </div>
                            <div class="pm_div">
                                <span>5</span>
                                <span>入职</span>
                            </div>
                            <div class="pm_div">
                                <span>10</span>
                                <span>转正</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        

            <div class="postbottom">
                <div class="pb_left">
                    <div class="pbl_div" @click="toAddPost">
                        <span>新增岗位</span>
                    </div>
                    <div class="pbl_div">
                        <span>编辑岗位</span>
                    </div>
                </div>
                <div class="pb_right">
                    <div class="pbr_div">
                        <span>批量刷新</span>
                    </div>
                    <div class="pbr_div">
                        <span>批量暂停</span>
                    </div>
                </div>
            </div>
        </template>
        <van-popup v-model="showScale" position="bottom">
            <van-picker
                :title="dialogTitle"
                show-toolbar
                :columns="urgencyList"
                @confirm="onConfirmScale"
                @cancel="onCancelScale">
            </van-picker>

        </van-popup>


       <post-footer active="gangwei"></post-footer>

    </div>
</template>
  
<script>
    import homeapi from '@/api/api.js'
    import postFooter from '@/components/postFooter.vue'
    export default {
        name: 'postindex',
        data(){
            return{
                year:2025,
                totalInfo:{},
                pageNo:1,
                pageSize:10,
                rewardList:[],
                reward:'',
                urgency:"",
                urgencyList:[],
                status:1,
                showScale:false,
                postList:[],

                
            }
        },
        components: {
            postFooter
        },
        mounted(){
            this.getCompanyTotal();
            this.getPostList();
            this.getDictList();
        },
        methods:{
             //获取字典
            async getDictList(){
                let data=await homeapi.getDictList();
                if(data.code==200){
                    this.rewardList=data.result.reward
                    if(this.rewardList.length>0){
                        this.reward=this.rewardList[0].value
                    }
                    this.urgencyList=data.result.urgency
                }
            },

            //获取统计信息
            async getCompanyTotal(){
                let year=this.year;
                let data=await homeapi.getCompanyTotal({year});
                if(data.code==200){
                    this.totalInfo=data.result
                }
            },
            //获取岗位列表
            async getPostList(){
                let pageNo=this.pageNo
                let pageSize=this.pageSize
                let reward=this.reward
                let urgency=this.urgency
                let status=this.status
                let data=await homeapi.getPostList({pageNo,pageSize,reward,urgency,status});
                if(data.code==0){
                    this.postList=data.result.records
                }

            },
            changeStatus(status){
                this.status=status;
                this.getPostList();
            },
            changeReward(item){
                this.reward=item.value;
                this.getPostList();
            },
            showUrgencyDialog(){
                this.showScale=true;
            },
            onConfirmScale(item){
                this.urgency=item.value;
                this.onCancelScale();
                this.getPostList();
            },
            onCancelScale(){
                this.showScale=false
            },
            toAddPost(){
                window.open("/#/post/add")
                // this.$router.push("/post/add")
            }
            
        }
    }
</script>
<style scoped lang="less">
    .postindex{
        width: 100%;
        display: inline-block;
    }
    .emptypost{
        width: 100%;
        margin-top: 2.6667rem;
        padding: 0 1.4667rem;
        box-sizing: border-box;
    }
    .ep_title{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: .64rem;
        color: #F5792A;
        line-height: 1.4933rem;
        font-weight: bold;
    }
    .ep_desc{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: .64rem;
        color: #F5792A;
        line-height: 1.4933rem;
        font-weight: bold;
    }
    .ep_txt{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .3733rem;
        color: #999999;
        line-height: .4933rem;
        margin-top: 2.5333rem;
    }
    .ep_btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:.4267rem;
        color: #FFFFFF;
        line-height: .56rem;
        margin-top: 2.32rem;
        background: #F5792A;
        height: 1.1733rem;
        border-radius: .1067rem;
    }
    .pi_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .4rem;
        box-sizing: border-box;
        background: #FFFFFF;
    }
    .pih_right{
        width: 4.5067rem;
        height: 2.1333rem;
        background: #FFF9F5;
        border-radius: .1067rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .4267rem;
        color: #F5792A;
        font-weight: 700;
    }
    .pih_left{
        flex: 1;
        display: inline-block;

    }
    .pihl_select{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pihl_select span{
        font-size: .32rem;
        color: #333333;
    }
    .pihl_select .iconfont{
        font-size: .32rem;
        color: #999999;
        margin-left: .1067rem;
    }
    .pihl_div{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: .32rem;
        color: #999999;
        margin-top: .1067rem;
        font-weight: 400;
    }
    .pihl_div:first-child{
        margin-top: .2133rem;
    }
    .pihl_div span:last-child{
        font-size: .32rem;
        color: #333333;
        margin-left: .1067rem;
    }
    .pih_table{
        width: 100%;
        display: inline-block;
        background: #FFFFFF;
    }
    .pih_list{
        width: 100%;
        padding: 0 .32rem;
        box-sizing: border-box;
        background: #f8f8f8;
    }
    .pihl_content{
        width: 100%;
        background: #FFFFFF;
        border-radius: .1067rem;
        margin-top: .2133rem;
        display: inline-block;
    }
    .piht_first{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 .4rem;
        box-sizing: border-box;
    }
    .pihtf_div{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .4267rem;
        color: #666666;
        margin-right: .8rem;
        line-height:.56rem;
        position: relative;
    }
    .piht_second{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .5067rem;
        margin-bottom: .4rem;
        padding: 0 .4rem;
        box-sizing: border-box;
    }
    .pihtfd_xian{
        width: 1.3867rem;
        height: 2px;
        background: #F5792A;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -0.0667rem;
    }
    .pihts_left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pihts_div{
        font-size: .3467rem;
        color: #666666;
        font-weight: 400;
        position: relative;
    }
    .pihts_div:last-child{
        margin-left: .8rem;
    }
    .pihtsd_xian{
        width: 1.3867rem;
        height: 1px;
        background: #F5792A;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -0.0667rem;
    }
    .pihts_right{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pihts_right span{
        font-size: .32rem;
        color: #333333;
    }
    .pihts_right .iconfont{
        font-size: .32rem;
        margin-left: .1067rem;
        color: #999999;
    }
    .postbottom{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 1.3067rem;
        background: #FFFFFF;
        height: 1.1733rem;
        padding: 0 .48rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #DEDEDE;
    }
    .pb_left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pbl_div{
        width: 1.92rem;
        height: .7467rem;
        background: #FFFFFF;
        border-radius: .1067rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E6E6E6;
        font-size: .32rem;
        color: #999999;
    }
    .pbl_div:last-child{
        margin-left: .4533rem;
    }
    .pb_right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .pbr_div{
        width: 1.92rem;
        height: .7467rem;
        background: #F5792A;
        border-radius: .1067rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .32rem;
        color: #FFFFFF;
    }
    .pbr_div:last-child{
        margin-left: .4533rem;
    }
    .pihlc_div{
        width: 100%;
        display: inline-block;

    }
    .pihlcd_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pihlcdh_select{
        width: 42px;
        height: 42px;
        margin-left: 16px;
    }
    .pihlcdh_main{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pihlcdh_left{
        flex: 1;
        height: 1rem;
        background: #F5792A;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: .4267rem;
        color: #FFFFFF;
        font-weight: bold;
        padding-left: .2133rem;
    }
    .pihlcdh_right{
        width: 2.9067rem;
        height: .9867rem;
        background: #FFF2EA;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .2133rem;
        box-sizing: border-box;
        font-size: .3733rem;
        color: #F5792A;
    }
    .pihlcd_total{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 1.3333rem;
    }
    .pt_div{
        flex: 1;
        height: 1.3333rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: .3733rem;
        color: #333333;
        line-height: .4933rem;
    }
    .pt_div span:last-child{
        font-size: .32rem;
        color: #999999;
        line-height: .4267rem;
        margin-top: .1067rem;
    }
    .pihlcd_main{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 1.4533rem;
        background: #FDFBF9;
    }
    .pm_div{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: .3733rem;
        color: #333333;
        line-height: .4933rem;

    }
    .pm_div span:last-child{
        font-size: .32rem;
        color: #999999;
        line-height: .4267rem;
    }
    .select_div{
        color: #F5792A;
    }
</style>

  